<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../../js/echarts.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../plugins/vue/vue.js"></script>
<body>
<div id="main" style="width: 1190px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    new Vue({
        el:"#main",
        mounted(){
            let s = [];
            let t = [];
            axios({
                url:"/commodity",
                method:"GET"
            }).then(res=>{
                // s=res.data;
                console.log(res.data.data);
                for (let i = 0 ; i<res.data.data.length;i++ ){
                    s.push(res.data.data[i].name);
                    t.push(res.data.data[i].sort)
                }
                console.log(this.option)
                // console.log(s)
                // console.log(t)
                // this.option.xAxis.data = s;
                // this.option.series.data = t;
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: s,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            barWidth: '40%',
                            data: t
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            })
        },
    })

</script>
</body>
</html>